import React, { useState, useEffect, useRef } from 'react';
import styles from './index.less';
import { Tooltip } from 'antd';
import { getCenterEllipsis } from 'enoad-component-web/dist/src/core/util';
import {
  ThunderboltTwoTone,
  FireTwoTone,
  StarTwoTone,
  PushpinTwoTone,
  TagTwoTone,
} from '@ant-design/icons';

const origin = [
  { level: 5, color: '#f90000', icon: <ThunderboltTwoTone twoToneColor="#f90000" /> },
  { level: 4, color: '#ffcocb', icon: <FireTwoTone twoToneColor="#ffcocb" /> },
  { level: 3, color: '#008000', icon: <StarTwoTone twoToneColor="#008000" /> },
  { level: 2, color: '#ffff00', icon: <PushpinTwoTone twoToneColor="#ffff00" /> },
  { level: 1, color: '#c0c0c0', icon: <TagTwoTone twoToneColor="#c0c0c0" /> },
];

const SwingItemComponent = (props) => {
  const { id, data, onDragEnd, onDragStart } = props;
  const taskLevel = data.taskLevel
    ? JSON.parse(data.taskLevel)
    : { id: 1, name: '建议' };
  const selectLevel = origin.find((item) => {
    return item.level === taskLevel.id;
  });
  const handleDragStart = (e) => {
    onDragStart(id);
  };
  return (
    <div
      key={`item-${id}`}
      onDragStart={handleDragStart}
      onDragEnd={onDragEnd}
      className={styles.item}
      draggable="true"
    >
      <header className={styles.itemHeader}>
      {selectLevel && selectLevel.icon}
        <div
          className={styles.itemTag}
          style={{ background: selectLevel && selectLevel.color }}
        >
          
          {taskLevel.name}
        </div>
        <Tooltip title={data.name}>
          {getCenterEllipsis(data.name, 10, 10, 0)}
        </Tooltip>
      </header>
      <main className={styles.itemMain}>{data.Task__2}</main>
    </div>
  );
};
export default SwingItemComponent;
